<template>
  <div>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-form :inline="true" :model="formVisitors" class="demo-form-inline">
      <el-form-item label="访客姓名">
        <el-input v-model="formVisitors.visitorName" placeholder="请输入访客姓名"/>
      </el-form-item>
      <el-form-item label="访客手机号">
        <el-input v-model="formVisitors.visitorPhoneNumber" placeholder="请输入访客手机号"/>
      </el-form-item>
      <el-form-item label="到访时间">


        <div class="block">
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择到访时间"
            align="right"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>



    <el-table
      ref="multipleTable"
      :data="visitors"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="序号"
        width="120">
        <template slot-scope="scope">{{ scope.row.index}}</template>
      </el-table-column>

      <el-table-column
        label="访客姓名"
        width="120">
        <template slot-scope="scope">{{ scope.row.visitorName}}</template>
      </el-table-column>

      <el-table-column
        prop="address"
        label="备注"
        show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">

      </el-table-column>
    </el-table>


    <div class="block">
      <el-pagination
        @current-change="loadVisitor"
        :current-page="current"
        :page-sizes="[ 3, 6, 9,12]"
        :page-size="3"
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>





  </div>
</template>

<script>
    export default {
        name: "visitor",
        data() {

            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: '',

                total: 0,                //共多少条
                current: 0,              //当前页数
                pageSize: 5,             //分页大小
                formInline: {
                    user: '',
                    region: ''
                },
                formVisitors: {visitorName : "", visitorPhoneNumber : "",visitorDate:""},//搜索类容
                visitors: [],//表格数据
                multipleSelection: [],

                options: [{
                    value: '恒大城三期',
                    label: '恒大城三期'
                },
                    {
                        value: '恒大城二期',
                        label: '恒大城二期'
                    }],
                value: '恒大城三期'
            }
        },
        methods: {
            loadVisitor(current,pageSize) {
                this.current=current;
                this.pagesize=pageSize;

                this.axios.get("http://localhost:8080/visitors/page/"+this.current+"/"+this.pageSize)
                    .then(res => {
                        // console.log(res);
                        if (res.data.status === "OK") {
                            this.visitors = res.data.data.records;
                            this.current = res.data.data.current;
                            this.total = res.data.data.total;
                        }
                    })
            },
            handleSelectionChange(val) {//全选
                this.multipleSelection = val;
            },
            onSubmit() {
                console.log('submit!');
                console.log(this.value);
                console.log(this.formVisitors);
                // this.axios.get("http://localhost:8080/zyVisitor/communityName/"+this.value+"/"+this.formVisitors)
            },

            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }

        }
        , created() {
            this.loadVisitor(this.current,this.pageSize);
        }
    }
</script>

<style scoped>

</style>
